<!DOCTYPE html>
<html>

<head>
    <meta content="text/html; charset=utf-8" http-equiv="Content-Type">
    <title>flv.js demo</title>

    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/sockjs-client/1.4.0/sockjs.min.js"></script>
    <script src="https://cdn.bootcss.com/stomp.js/2.3.3/stomp.min.js"></script>
    <style>
        .mainContainer {
            display: block;
            width: 2000px;
            margin-left: auto;
            margin-right: auto;
        }
        .centeredVideo {
            display: block;
            width: 100%;
            /*height: 576px;*/
            margin-left: auto;
            margin-right: auto;
            margin-bottom: auto;
            /*object-fit: contain;*/
        }

    </style>
</head>

<body>

<div class="mainContainer">
    <input id="url" value="http://file.sxycy.cn:88/live?app=meeting&stream=f633c9952468475bae6986671ea9371c&liveType=meeting&__wgx_sid=b672c903dabd494abf24bb70faeb794e" style="width:1000px"></br>
    <input type="button" value="apply" onclick="startVideo('videoElement2', document.getElementById('url').value)">
    <input type="button" value="Play" onclick="play()">
    <input type="button" value="Stop" onclick="stop()">
<!--    <video name="videoElement" class="centeredVideo" id="videoElement" controls width="1024" height="576" autoplay>-->
<!--        Your browser is too old which doesn't support HTML5 video.-->
<!--    </video>-->

    <video name="videoElement2" class="centeredVideo" id="videoElement2" controls width="1824" height="576" autoplay>
        Your browser is too old which doesn't support HTML5 video.
    </video>

</div>
<div id="show">
</div>

<script src="./flv/flv.js?v=2"></script>

<script>
    if (flvjs.isSupported()) {
        //startVideo('videoElement','flv','http://192.168.1.5:88/live?app=src&stream=car');
        //startVideo('videoElement2','flv','http://windows.sxycy.cn:88/live?app=live&stream=1003300001');
        //startVideo('videoElement2','mp4','http://192.168.1.5:88/live/group1/M00/00/37/wKgBBV6Zg-2AKLifB5IHKuW9XTI724.mp4');
    }
    var flvPlayer;
    function startVideo(v,url){
        destoryVideo();
        var type = url.startsWith("rtmp")?"rtmp":"flv";
        var videoElement = document.getElementById(v);
        flvPlayer = flvjs.createPlayer({
            type: type,
            isLive: true,
            hasAudio: true,
            hasVideo: true,
            enableStashBuffer: true,
            stashInitialSize: 10240,
            //url: 'https://xl.live-play.acgvideo.com/live-xl/520658/live_12860646_332_c521e483.flv?wsSecret=778d91efcb22c588be28cb67ebe57082&wsTime=1510929009'
            //url: 'http://192.168.1.5:88/live?app=vod&stream=car'
            url: url

        });
        flvPlayer.attachMediaElement(videoElement);
        flvPlayer.load();
        flvPlayer.play();
        videoElement.onplay= function (e) {
            console.log("play");
            console.log(e);

        };
        videoElement.onpause= function (e) {
            console.log("pause"+e);
        };
        // videoElement.addEventListener('click', function(){
        //     alert( '是否支持点播视频：' + flvjs.getFeatureList().mseFlvPlayback + ' 是否支持httpflv直播流：' + flvjs.getFeatureList().mseLiveFlvPlayback )
        // })
    }


    function destoryVideo(){
        if(flvPlayer){
            flvPlayer.pause();
            flvPlayer.unload();
            flvPlayer.detachMediaElement();
            flvPlayer.destroy();
            flvPlayer = null;
        }
    }

    function reloadVideo(){
        destoryVideo()
        startVideo()
    }


    var roomid = "test";
    var randomName = "user"+Math.floor(Math.random()*1000000);//随机生成用户名
    var conTime = 0;//连接成功次数
    /**
     * websocket 控制
     * @param connected
     */
    function setConnected(connected) {
        conTime++ ;
        $("#connect").prop("disabled", connected);
        $("#disconnect").prop("disabled", !connected);
        if (connected) {
            $("#conversation").show();
        }
        else {
            $("#conversation").hide();
        }
        $("#greetings").html("");
    }

    function connect() {
        var socket = new SockJS('../../live-websocket');
        stompClient = Stomp.over(socket);
        stompClient.heartbeat.outgoing = 10000;//心跳检测间隔毫秒
        //stompClient.heartbeat.incoming = 1;//接受服务器的回跳
        var connect_callback = function (frame) { //连接成功回调函数
            //connectCallback
            setConnected(true);
            console.log("connection successful: "+ frame);

            //订阅公共频道消息
            stompClient.subscribe("/topic/live." + roomid, function (greeting) {
                var parse = JSON.parse(greeting.body);
                console.log(parse);
                if(parse.content && flvPlayer){
                    switch(parse.content){
                        case 'stop': flvPlayer.pause();break;
                        case 'play': flvPlayer.play();break;
                    }
                }
            });
        };
        var error_callback = function(frame){//连接失败回调函数,中途掉线也回调
            if(conTime > 0 && conTime < 100){
                console.log('聊天服务器意外断开,正在重新连接.');
                setTimeout(connect, 2000);
            }else{
                console.log('聊天服务器连接失败,请重新登录.');
            }
        };
        stompClient.connect({username: randomName}, connect_callback, error_callback);
    }
    connect();

    function play(){
        doSendMsg("play");
    }

    function stop(){
        doSendMsg("stop");
    }
    function doSendMsg(msg,header){
        var m = {content: msg};
        stompClient.send("/app/live/"+roomid, header?header:{}, JSON.stringify(m));
    }
</script>

</body>

</html>